<template>
  <div class="detail">
    <div class="img">
      <van-image
        width="100%"
        height="210"
        lazy-load
        fit="cover"
        :src="filmdetails.poster"
      />
    </div>
    <div>
      <div>{{ filmdetails.name }}</div>
      <div>{{ filmdetails.category }}</div>
      <div>{{ filmdetails.premiereAt }}上映</div>
      <div>{{ filmdetails.nation }} | {{ filmdetails.runtime }}分钟</div>
      <div>
        {{ filmdetails.synopsis }}
      </div>
    </div>
    <h2>演职人员</h2>
    <swiper :slides-per-view="4" :space-between="0">
      <swiper-slide
        v-for="(item, index) in filmdetails.actors"
        :key="index"
        class="swiper-slide"
      >
        <div>
          <van-image
            width="80px"
            height="80px"
            fit="cover"
            position="center"
            :src="item.avatarAddress"
          />
          <div
            style="
              font-size: 8px;
              width: 80px;
              text-align: center;
              margin-top: 12px;
            "
          >
            {{ item.name }}
          </div>
          <div
            style="
              font-size: 8px;
              width: 80px;
              text-align: center;
              margin-top: 5px;
            "
          >
            {{ item.role }}
          </div>
        </div>
      </swiper-slide>
    </swiper>
    <h2>剧照</h2>
    <swiper :slides-per-view="1.8" :space-between="0">
      <swiper-slide
        v-for="(item, index) in filmdetails.photos"
        :key="index"
        class="swiper-slide"
        @click="showPreview(index)"
      >
        <div>
          <van-image
            width="195px"
            height="120px"
            fit="cover"
            position="center"
            :src="item"
          />
        </div>
      </swiper-slide>
    </swiper>
    <van-button
      type="primary"
      size="large"
      class="btn"
      color="#7232dd"
      to="/movie/thehit"
      >暂无购票,点击回退</van-button
    >
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { onBeforeRouteLeave, useRoute } from "vue-router";
import { moiveDetailData } from "../axios/http";
import { FilmType } from "../types/index";
import { Swiper, SwiperSlide } from "swiper/vue";
import { ImagePreview } from "vant";
import mit from "../configuration/mitt";
import "vant/es/image-preview/style";

import "swiper/css";
const route = useRoute();
const filmdetails = ref<FilmType>({
  poster: " ",
  name: " ",
  category: "",
  premiereAt: "",
  nation: "",
  runtime: "",
  synopsis: "",
});
onMounted(async () => {
  let res = await moiveDetailData(route.params.id as string);
  console.log(res);
  filmdetails.value = res.data.film;
});
const showPreview = (index: number) => {
  ImagePreview({
    images: filmdetails.value.photos as string[],
    startPosition: index,
    closeable: true,
    showIndicators: true,
  });
};
mit.emit("flag", false);
onBeforeRouteLeave(() => {
  mit.emit("flag", true);
});
</script>

<style scoped lang="scss">
.detail {
  padding-bottom: 80px;

  .poster {
    width: 100%;
    height: 250px;
  }

  .swiper-box {
    margin: 0 10px;
  }
}
h2 {
  font-size: 16px;
  font-weight: 400;
}
.btn {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
}
</style>
